<template>
  <div class="login-container">
    <div class="login-box">
      <h2>智慧校园综合管理系统</h2>
      <div class="login-form">
        <el-form ref="ruleFormRef" :model="loginForm" status-icon :rules="rules">
          <el-form-item class="form-item" prop="username">
            <el-input class="item-input" v-model="loginForm.username" placeholder="请输入用户名"/>
          </el-form-item>
          <el-form-item class="form-item"  prop="password" >
            <el-input class="item-input" type="password" v-model="loginForm.password" placeholder="请输入密码"/>
          </el-form-item>

          <el-form-item class="form-item">
            <el-button class="item-btn" @click="handlerLogin(ruleFormRef)">登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { login } from "@/api/login"

const ruleFormRef = ref()

//登录表单
const loginForm = reactive({
  username: "",
  password: ""
})

//校验规则
const rules = reactive({
  username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
  password: [{ required: true, message: "请输入密码", trigger: "blur" }],
})

//登录
function handlerLogin(formEl){
  if(!formEl){
    return
  }
  //触发表单验证
  formEl.validate((valid) => {
      if (valid) {
          login(loginForm).then(res=>{
              //登录成功保存token
              localStorage.setItem("token",res.data.token)
          })
      } 
  })

}
</script>

<style scoped>
.login-container {
  height: 100%;
  background-image: linear-gradient(to right, #fbc2eb, #a6c1ee);
}

.login-box {
  width: 450px;
  height: 350px;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.login-box h2 {
  text-align: center;
}

.login-form {
  height: 300px;
  background-color: white;
  border-radius: 20px;
  margin-top: 20px;
  box-sizing: border-box;
  padding-top: 50px;
}

.form-item{
    width: 350px;
    margin-left: auto;
    margin-right: auto;
}

.item-input{
    height: 50px;
    line-height: 50px;
    font-size: 16px;
}

.item-btn{
    margin-top: 20px;
    width: 100%;
    height: 45px;
    background-image: linear-gradient(to right, #a6c1ee,#fbc2eb);
    border-radius: 5px;
    color: white;
}


</style>
